<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="persdoc" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
	<title>Personal Doc</title>
	<link  type="text/css" rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/resources/styles/main.css"/>
	<link  type="text/css" rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/resources/styles/button.css"/>
	<link  type="text/css" rel="stylesheet" media="screen" href="${pageContext.request.contextPath}/resources/styles/scenarios.css"/>
		
	
</head>
<body>
	<div id="header">
		<div class="wrap">
			<%@ include file="../general/header.jsp" %>
		</div>
	</div>
	<div class="wrap">
		<div id="main">
							<div id="loading" style="magin-top:100px;">
			<p>Saving schedule...</p>
			<img src="${pageContext.request.contextPath}/resources/images/ajax-loader.gif"  style="border:none;"  alt="loading.." />	
			</div>		

		<h2>SCHEDULES</h2>
		<div id="boxesPanel" style="width:400px;height:170px;">
			<ul class="drag" > 	
				<div class="box timerelated delay">Delay 00:15</div>
			</ul> 
			<ul class="drag" > 
				<div  class="box examination">Weight</div>
				<div  class="box examination">Glucose</div>
				<div  class="box examination">BP</div>
				<div  class="box examination">Pills</div>
			</ul> 
			<ul class="drag"> 
					<div  class="box other">Send</div>
			</ul> 
		</div>
		<div style="width:100px;height:40px"> 
			<img id="recycle" style="margin-left:13px;border:none;" src="${pageContext.request.contextPath}/resources/images/recycle_bin2.png" title="Click here and select box you would like to delete"/>
		</div> 
			<div id="scenariosPanel">
				
				<c:choose>
					<c:when test="${empty scenarios}">
						<div class="scenario">
							<div class="timeline">
								<div class="box timerelated start">Time 09:00</div>
							</div>
						</div>
					</c:when>
					<c:otherwise>
						<c:forEach items="${scenarios}" var="scenario" varStatus="status">
						<div class="scenario">
							<div class="timeline">
								<c:forEach items="${scenario.boxes}" var="box" >
									<div class="box ${box.type}">${box.name} ${box.value} </div>								
								</c:forEach>
							</div>
							<c:if test="${not status.first}"><a id="remove" class="button removeButton"  href="#"><span>Remove</span></a> </c:if>
						</div>
						</c:forEach>
						
					</c:otherwise>
				</c:choose>		
				<div class="scenario hiddenScenario">
					<div class="timeline">
						<div class="box timerelated start">Time 09:00</div>
					</div>
					<a id="remove" class="button removeButton"  href="#"><span>Remove</span></a> 
				</div>
				
				
		</div>
		<a id="addScenarioButton" class="button"  href="#"><span>Add new scenario</span></a> 
				<a id="saveButton" class="button"  href="#"><span>Save schedules</span></a> 
		
		
						
			
		</div>
		
		<div id="side">
			<%@ include file="../general/side.jsp" %>
		</div>
	
		<div id="footer">
			<%@ include file="../general/footer.jsp" %>
		</div>
	</div>	
	<script src="${pageContext.request.contextPath}/resources/scripts/scenarios.js"></script> 

</body>
</html>